

<div class="container">

  <div *ngIf="errorMessage" class="alert alert-danger" role="alert">
		<strong>Error:</strong> {{errorMessage}}
	</div>

  <div class="row">
      <h1>Resident to Utility </h1>
  </div>

  <div class="row">
    <br>
  </div>

  <div class="row RR">
    <div *ngIf="transactionFrom" class="col-md-offset-3 col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"><strong>Enter Transaction Info</strong></div>
        <div class="panel-body">
          <form [formGroup]="myForm">

            <p ><strong>Rate: {{utilityCoinsPerEnergy}}  Coins / kwH </strong></p>

            <p>Action:
              <select name="actions" formControlName="action">
                <!-- <option value="buyEnergy">Buy Energy (kwh) from Utility Company</option> -->
                <option value="sellEnergy">Sell Energy (kwh) to Utility Company</option>
              </select>
            </p>

            <p>Resident:
              <select name="residents" formControlName="formResidentID">
                <option *ngFor="let resident of allResidents" value="{{resident.residentID}}">{{resident.residentID}}</option>
              </select>
            </p>


            <p>Utility Company:
              <select name="utilityCompanys" formControlName="formUtilityID" >
                <option *ngFor="let utilityCompany of allUtilityCompanys" value="{{utilityCompany.utilityID}}">{{utilityCompany.utilityID}}</option>
              </select>
            </p>

            <p>Energy value (kwh):
              <input formControlName="value" type="number" step='any' class="form-control inlineInput">
            </p>



            </form>
        </div>
      </div>
    </div>

    <div *ngIf="!transactionFrom" class="col-md-offset-3 col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"><strong>Transaction Executed</strong></div>
        <div class="panel-body">
        <p>Time Interval: 1:00 pm - 2:00 pm</p>
          <form [formGroup]="myForm">
            <p>Transaction ID: {{transactionID}}</p>
          </form>
        </div>
      </div>
    </div>

  </div>

  <div class="row">
    <div *ngIf="transactionFrom" class="col-md-offset-4 col-md-4">
      <button (click)="execute(form);" type="button" class="btn btn-success" data-toggle="modal" >Execute Transaction</button>
    </div>
  </div>

  <div class="row">
    <br>
    <br>
  </div>


</div>
